import ApplicationTest from "./ApplicationTest";

export default function main() {
    const cvs: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement;
    let app: ApplicationTest = new ApplicationTest(cvs);
    /* app.update(0, 0);
    app.render();
    // 通过id号获取startButton和stopButton两个button元素
    let startButton: HTMLButtonElement | null = document.getElementById('start') as HTMLButtonElement;
    let stopButton: HTMLButtonElement | null = document.getElementById('stop') as HTMLButtonElement;
    // 单击startButton后，启动Appliation启动动画循环
    // 在每次循环中会调用update和render方法
    startButton.onclick = (ev: MouseEvent): void => {
        app.start();
    }
    // 单击stopButton后，会停止Application动画循环
    stopButton.onclick = (ev: MouseEvent): void => {
        app.stop();
    } */
    //----------------------------------------3.4.4代码----------------------------------------------------------//
    // 实现一个TimerCallback签名的回调函数，打印当前Timer的id号，以及传给回调函数的参数data
    function timerCallback(id: number, data: string): void {
        console.log(`当前调用的Timer的id: ${id} data: ${data}`);
    }
    // 3秒后触发回调函数，仅回调一次
    // addTimer后返回的id=0
    let timer0: number = app.addTimer(timerCallback, 3, true, 'data是timeCallback的数据');
    // 每5秒钟触发回调函数，回调n次，addTimer后返回的id=1
    let timer1: number = app.addTimer(timerCallback, 5, false, 'data是timeCallback的数据');
    // 获取stop Button元素
    let button: HTMLButtonElement = document.getElementById('stop') as HTMLButtonElement;
    // 单击stop button后
    button.onclick = (evt: MouseEvent): void => {
        // remove掉timer1计时器，并不实际删除id=1的计时器
        // 删除掉1号计时器，就不会有重复信息输出了
        app.removeTimer(timer1);
        // 这时打印出来的应该是两个计时器
        console.log(app.timers.length);
        // 重用0号计时器，并且10秒后回调一次，然后删除
        let id: number = app.addTimer(timerCallback, 10, true, 'data是timerCallback的数据');
        // 返回的应该是0号计时器，因为重用了现有的计时器
        console.log(id === 0);
        // 10秒后打印出0号计时器的相关信息，仅打印1次
    }
    app.start();
}